<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <el-form inline>
      <el-form-item>
        <el-date-picker
          v-model="queryForm.startTime"
          type="datetime"
          size="small"
          value-format="yyyy-MM-dd hh:mm:ss"
          placeholder="选择开始日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryForm.endTime"
          type="datetime"
          size="small"
          value-format="yyyy-MM-dd hh:mm:ss"
          placeholder="选择结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryForm.name"
          placeholder="用户名称"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryForm.nickName"
          placeholder="用户小程序昵称"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" plain @click="getList">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->
    <div>
      <span style="float: right">合计:{{ totalMoney }}</span>
    </div>
    <el-table
      v-loading="loading"
      :data="dataList"
      element-loading-text="Loading"
    >
      <el-table-column
        label="姓名"
        prop="user.name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="小程序昵称"
        prop="user.nickname"
        align="center"
      ></el-table-column>
      <el-table-column
        label="消费剧本名称"
        prop="script.name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="消费金额"
        prop="payMoney"
        align="center"
      ></el-table-column>
      <el-table-column
        label="消费时间"
        prop="createDate"
        align="center"
      ></el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :limit.sync="queryForm.pageSize"
      :page.sync="queryForm.currPage"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getConsumptionApi } from "@/api/record.js";
import pagination from "@/components/Pagination/index";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      queryForm: {
        currPage: 1,
        pageSize: 10,
        startTime: "",
        endTime: "",
      },
      total: 0,
      totalMoney: 0,
      dataList: [],
      loading: false,
    };
  },
  created() {
    this.setDefaultDate();
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getConsumptionApi(this.queryForm)
        .then((res) => {
          console.log("消费记录", res);
          const { records, total } = res.data;
          this.dataList = records;
          this.total = total;
          this.totalMoney = res.message != "null" ? res.message : 0;
          this.loading = false;
        })
        .catch((err) => {
          console.log("err", err);
          this.loading = false;
        });
    },
    setDefaultDate() {
      const today = new Date();
      var yesterday = new Date();
      yesterday.setDate(today.getDate() - 1);
      const month = today.getMonth() + 1;
      const startTime =
        yesterday.getFullYear() +
        "-" +
        month +
        "-" +
        yesterday.getDate() +
        " 00:00:00";
      const endTime =
        today.getFullYear() + "-" + month + "-" + today.getDate() + " 00:00:00";
      this.queryForm.startTime = startTime;
      this.queryForm.endTime = endTime;
    },
  },
};
</script>

<style lang="scss" scoped></style>
